<template>
  <div>
    <el-card>
      <div slot="header">
        <h3>售价信息多计量-表单查看页面</h3>
      </div>
      <div>
        <el-row type="flex" justify="end">
          <el-button
            v-if="tableInfo.list.length > 0"
            type="text"
            size="large"
            @click="handleExportData"
            :loading="exportLoading"
            >模板导出</el-button
          >
        </el-row>
        <el-row class="format_table_wrap">
          <sale-skus-table
            showPagination
            :loading="tableInfo.loading"
            :data-source="tableInfo.list"
            :columns="tableInfo.columns"
            :pagination="pagination"
            :total="pagination.total"
            @pageChange="handlePageChange"
            @pageSizeSelect="handlePageSizeChange"
          />
        </el-row>
        <FooterFields :recordNo="recordNo" />
      </div>
    </el-card>
  </div>
</template>
<script>
import { ApiRequest, ApiRequestExportTable } from '@api/basePage';
import FooterFields from '@/pages/commodity/components/FooterFields';
import { salePriceMultipleColumns } from '@/pages/commodity/modules/constants/salePriceModule/viewSalePriceModule';
import SaleSkusTable from '@/pages/commodity/modules/components/saleSkusTable';
import {
  salePriceViewExtendFields,
  getHandledTableColumnsFn
} from '@/pages/commodity/modules/constants/salePriceModule/extendFields';
/* utils */
import { generateUuid, isResponseSuccess } from '@/utils/bizUtils';

export default {
  components: {
    FooterFields,
    SaleSkusTable
  },
  data () {
    return {
      recordNo: '',
      exportLoading: false,
      tableInfo: {
        list: [],
        columns: [],
        loading: false
      },
      pagination: {
        pageNum: 1, // 当前页码
        pageSize: 50, // 每页条数
        total: 0
      },
    };
  },
  created () {
    this.tableInfo.columns = getHandledTableColumnsFn({
      source: salePriceMultipleColumns,
      extendFileds: salePriceViewExtendFields
    })
    this.recordNo = this.$route.query.recordNo;
    if (!this.recordNo) { return this.$message.warning('没有recordNo信息') };
    this.handleGetTableData();
  },
  methods: {
    /* 改变页码事件 */
    handlePageChange (currentPage) {
      this.pagination.pageNum = currentPage;
      this.handleGetTableData(); // 重新加载表格数据
    },
    /* 改变当前页条数大小事件 */
    handlePageSizeChange (pageSize) {
      this.pagination.pageSize = pageSize;
      if (this.tableInfo.list.length === 0) {
        return false;
      }
      this.handleGetTableData(); // 重新加载表格数据
    },
    /* 查询表格数据 */
    handleGetTableData () {
      let data = {
        nowPage: this.pagination.pageNum,
        pageShow: this.pagination.pageSize,
        recordNo: this.recordNo
      }
      this.getSalePriceDataAction(data);
    },
    /* 获取表格数据action */
    getSalePriceDataAction (data) {
      this.tableInfo.loading = true;
      ApiRequest(
        `/sysback/salepriceskuupdate/getSalePriceRecordDetailPage`,
        'post',
        data,
        false
      ).then(res => {
        this.tableInfo.loading = false;
        if (!isResponseSuccess(res)) {
          return false;
        }
        let { results, totalNum } = res.retData;
        if (!results) { return false }
        this.tableInfo.list = results.reduce((value, item) => {
          value.push(JSON.parse(item.recordContent));
          return value;
        }, []);
        this.pagination.total = totalNum;
      }).catch(() => {
        this.tableInfo.loading = false;
      });
    },
    /* 导出表格 */
    handleExportData () {
      let uuid = generateUuid();
      this.exportLoading = true;
      ApiRequestExportTable(
        `/sysback/salepirce/up/excel/export?isSaleMultiUnit=1&uuid=${uuid}`,
        'post',
        this.tableInfo.list,
        false
      )
        .then((res) => {
          this.exportLoading = false;
          const blob = new Blob([res], {
            type: 'application/octet-stream'
          });
          var link = document.createElement('a');
          link.href = window.URL.createObjectURL(blob);
          link.download = `售价信息-多计量模板_${uuid}.xlsx`;
          link.click();
          window.URL.revokeObjectURL(blob); // 释放掉blob对象
        })
        .catch(() => {
          this.exportLoading = false;
          this.$message.error('导出失败');
        });
    },
  }
};
</script>
